<template>
    <div class="container-fluid" v-loading="loading">

        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-toolbar clearfix">
                        <form class="pull-right search-bar" onsubmit="return false;">
                            <div class="input-group-btn">
                                <input type="text" class="form-control" v-model="keyword" placeholder="请输入名称">

                            </div>

                            <div class="input-group-btn">
                                <button class="btn btn-success" type="submit" v-on:click="search()">筛选</button>
                            </div>
                        </form>
                        <div class="toolbar-btn-action">
                            <a class="btn btn-primary m-r-5" :href="'/admin/goods/create/'"><i class="mdi mdi-plus"></i> 新增</a>
                        </div>
                    </div>

                    <div class="card-body">
                        <div class="table-responsive" style="width: 100%;margin-top: 20px;">
                            <el-table
                                    :data="list"
                                    style="width: 100%"
                                    :default-sort="{prop: 'date', order: 'descending'}"
                            >
                                <el-table-column
                                        label="ID"
                                        type="index"
                                        :index="indexMethod"
                                        width="50">
                                </el-table-column>
                                <el-table-column
                                        label="产品名称"
                                        width="180">
                                    <template slot-scope="scope">
                                        <a @click="openEdit(scope.row._id)" style="cursor:pointer;">{{scope.row.name }}</a>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        prop="companyName"
                                        label="所属公司"
                                        width="80">
                                </el-table-column>
                                <el-table-column
                                        prop="userId"
                                        label="用户Id"
                                        width="80">
                                </el-table-column>
                                <el-table-column
                                        prop="price"
                                        label="价格数字"
                                        width="80">
                                </el-table-column>
                                <el-table-column
                                        label="置顶状态"
                                        align="center"
                                        width="80">
                                    <template slot-scope="scope">
                                        <p v-if="scope.row.isTop">是</p>
                                        <p v-else>否</p>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        label="操作"
                                        align="center"
                                        width="180">
                                    <template slot-scope="scope">
                                        <el-button v-if="scope.row.isTop" size="mini" @click="setTop(scope.row._id,0)" type="primary">取消置顶</el-button>
                                        <el-button v-else size="mini" @click="setTop(scope.row._id,1)" type="success">置顶</el-button>
                                        <el-button
                                                size="mini"
                                                type="danger"
                                                @click="handleDelete(scope.row)">删除
                                        </el-button>
                                    </template>
                                </el-table-column>
                            </el-table>

                            <nav style="float: right;">
                                <el-pagination
                                        layout="prev, pager, next"
                                        :total="total" :hide-on-single-page="pageActive"
                                        :page-size="pageSize"
                                        :current-page="currentPage"
                                        @current-change="handleCurrentChange"
                                >
                                </el-pagination>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
    export default {
        name: "GoodsComponent",
        data() {
            return {
                keyword: '',
                pageActive: false,
                list: [],
                pageSize: 10,
                total: 0,
                currentPage: 1,
                loading: true,
                order: 'desc',
                orderField: '_id',
            }
        },
        methods: {
            search: function () {
                let self = this;
                let uri = 'goods/post-list';
                self.loading = true;

                let postData = {
                    keyword: self.keyword,
                    page: self.currentPage,
                    order: self.order,
                    orderField: self.orderField,
                    verifyStatus: 1,
                    companyId: '',
                    userId:0
                };

                axios.post(uri,postData).then(function (result) {
                    self.total = result.goods.total;
                    if (self.total > 0) {
                        self.pageActive = false;
                    } else {
                        self.pageActive = true;
                    }
                    self.list = result.goods.data;
                    self.loading = false;
                }).catch(function (error) {
                    self.loading = false;
                });
            },
            setTop(id,top) {
                let self = this;
                let uri = "goods/set-top/"+id+"/"+top;
                axios.get(uri).then(function (result) {
                    self.search();
                });
            },
            handleDelete: function (row) {
                let self = this;
                let tipStr = "此操作将永久删除“" + row.name + "”, 是否继续?";
                self.$confirm(tipStr, '产品删除', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    self.deleteRequire(row._id)
                }).catch(() => {
                    self.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            deleteRequire: function (id) {
                let self = this;
                let uri = "goods/" + id;
                self.loading = true;
                axios.delete(uri).then(function (result) {
                    self.search();
                }).catch(function (error) {
                    self.loading = false;
                });
            },
            handleCurrentChange: function (val) {
                this.currentPage = val;
                this.search();
            },
            indexMethod: function (index) {
                return index + 1;
            },
            handleSetStatus(id, status) {
                let self = this;
                let uri = "company/set-status/" + id + "/" + status;
                axios.get(uri).then(function (result) {
                    self.getInfo();
                });
            },
            openEdit(id) {
                window.location.href = 'goods/' + id + '/edit';
            },
        },
        mounted() {
            this.search();
        }
    }
</script>

<style scoped>

</style>
